<template>
	<view class="container">
		<!-- 修改原生菜单栏样式 -->
		<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']"
			:style="'width: calc(100% /' + tabbarList.length + ')'" @click="changeItem(item)"
			v-for="(item, i) in tabbarList" :key="i">
			<view class="item-top">
				<image :src="tabbarIndex === item.id ? item.selectedIconPath : item.iconPath" />
			</view>
			<view class="item-bottom" :class="[tabbarIndex === item.id ? 'item-active' : '']">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		computed: {
			...mapGetters(['tabbarIndex']), // 取出vuex中用户数据
		},
		data() {
			return {
				tabbarList: [{
						id: 0,
						pagePath: "/pages/main/index/index",
						iconPath: "../static/tabbar/home01.png",
						selectedIconPath: "../static/tabbar/home01_selected.png",
						text: "首页",
						centerItem: false
					},
					{
						id: 1,
						pagePath: "/pages/main/map/index",
						iconPath: "../static/tabbar/journey.png",
						selectedIconPath: "../static/tabbar/journey_selected.png",
						text: "地图",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "/pages/shop/changePage/changePage",
						iconPath: "../static/tabbar/shop.png",
						selectedIconPath: "../static/tabbar/shop_selected.png",
						text: "商城",
						centerItem: true
					},
					{
						id: 3,
						pagePath: "/pages/main/forum/index",
						iconPath: "../static/tabbar/forum.png",
						selectedIconPath: "../static/tabbar/journey_selected.png",
						text: "论坛",
						centerItem: false
					},
					{
						id: 4,
						pagePath: "/pages/main/my/index",
						iconPath: "../static/tabbar/my01.png",
						selectedIconPath: "../static/tabbar/my01_selected.png",
						text: "我的",
						centerItem: false
					}
				] // 导航栏列表
			};
		},
		mounted() {
			// #ifdef H5
			uni.hideTabBar(); // 隐藏 tabBar 导航栏
			// #endif
		},
		methods: {
			/* 导航栏切换 */
			changeItem(e) {
				console.log("按下", e);
				this.$store.dispatch('app/setTabbarIndex', e.id)
				console.log(e.id, '菜单');
				uni.switchTab({ url: e.pagePath }); // 跳转到其他 tab 页面
			}
		}
	};
</script>

<style scoped lang="scss">
	$textDefaultColor: #0f172a;
	$bottomBg: white;
	$textSelectedColor: #3c9cff;
	$centerItemBg: white;

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		color: $textDefaultColor;
		padding: 5rpx 0;
		background-color: $bottomBg;
		box-shadow: 0 0 10rpx #999;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 100rpx;

		.item-top {
			flex-shrink: 0;
			width: 65rpx;
			height: 65rpx;
			padding: 5rpx;

			image {
				box-sizing: border-box;
				padding: 5rpx;
				width: 100%;
				height: 100%;
			}
		}

		.item-bottom {
			width: 100%;
			font-size: 28rpx;
		}

		.item-active {
			color: $textSelectedColor;
		}
	}

	.center-item {
		position: relative;

		.item-top {
			position: absolute;
			top: -55rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 105rpx;
			height: 105rpx;
			background-color: $centerItemBg;
			border-radius: 50%;
			box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.2);
		}

		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
</style>